<template>
    <div>   
        <el-row class="home" :gutter="20">
            <el-row :span="8" style="margin-top: 20px">
                <el-card shadow="hover">
                    <el-table :data="currentData">
                        <el-table-column 
                        v-for="(val,key) in currentLable"
                        :key="key"
                        :prop="key"
                        :label="val"
                        >
                        </el-table-column>
                    </el-table>
                </el-card> 
                <el-card>
                    <div style="height: 280px" ref="echarts"></div>
                </el-card>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import * as echarts from 'echarts' 
import { getSsh } from '../../api/data.js'
export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'occupancy',
    data () {
        return {
            currentData:[
            
            ],
            currentLable:{
                time: '时间',
                cpu_percent	: 'CPU占用率',
                mem_percent	: '内存占用率',
                disk_percent: '磁盘占用率',
                network_percent	: '网络占用率',
                host : 'ip'
            },
            historyData:[
                {
                    平均内存占用率: 1,
                    平均CPU占用率: 1,
                    平均磁盘占用率: 1,
                    平均网络占用率: 1
                },
                {
                    平均内存占用率: 2,
                    平均CPU占用率: 2,
                    平均磁盘占用率: 2,
                    平均网络占用率: 2
                },
                {
                    平均内存占用率: 3,
                    平均CPU占用率: 3,
                    平均磁盘占用率: 3,
                    平均网络占用率: 3
                },
                {
                    平均内存占用率: 4,
                    平均CPU占用率: 4,
                    平均磁盘占用率: 4,
                    平均网络占用率: 4
                },
            ],
            historyLable:['1','2','3','4'],
        }
    },
    mounted(){
        getSsh().then(res => {
            const data = res.data
            const code = 200
            if(code == 200){
                //实时表格数据
                //console.log(data)
                this.currentData = data.currentData.data//后端传给的data数据中的currentData
                const history = data.historyData
                const xData = history.date
                const keyArray = Object.keys(history.data[0])
                const series = []
                
                keyArray.forEach(key => {
                    series.push({
                        name: key,
                        data: history.data.map(item => item[key]),
                        type: 'line'
                    })
                })
                //console.log(series)
                const option = { 
                    xAxis: {
                        data: xData
                    },
                    yAxis:{},
                    legend: {
                        data: ['mean_cpu','mean_mem','mean_disk','mean_network_percent']
                    },
                    series
                }
                const E = echarts.init(this.$refs.echarts)
                E.setOption(option)
                    }
                    //console.log(res)
                })   
    }
}
</script>